<template>
  <div class="box">
    <div class="top">
      <van-nav-bar title="问专家" left-arrow @click-left="onClickLeft" />
      <div class="search-1">
        <van-search v-model="searchKeyword" placeholder="搜索医生、医院或疾病症状" @change="filteredUsers" />
      </div>
    </div>
    <div class="re">
      <h3>热门科室</h3>
      <div class="ke">
        <ul>
          <li>神经外科</li>
          <li>耳鼻喉科</li>
          <li>全科</li>
          <li>皮肤科</li>
          <li>眼科</li>
          <li>小儿骨科</li>
          <li>内分泌科</li>
          <li>药剂科</li>
        </ul>
      </div>
    </div>
    <!-- 下拉菜单 -->
    <van-dropdown-menu active-color="#ee0a24">
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item title="筛选" ref="itemRef">
        <van-cell center title="北京">
          <template #title>
            <h3>北京</h3>
          </template>
        </van-cell>
        <van-cell center title="湖北">
          <template #title>
            <h3>北京</h3>
          </template>
        </van-cell>
      </van-dropdown-item>
    </van-dropdown-menu>

    <!-- 专家 -->
    <div class="list">
      <div class="list-1" v-for="(item, index) in listDataSearch" :key="index">
        <div class="left">
          <img style="width: 1.875rem; height: 1.875rem; border-radius: 50%" :src="item.avatar" alt="" />
        </div>
        <div class="right">
          <p>
            <span style="font-weight: bold; font-size: 20px">{{ item.name }}</span>
            <span style="margin-left: 20px">{{ item.position }}</span>
          </p>
          <p>
            <span>{{ item.address }}</span> <span>{{ item.hospital }}</span> <span>{{ item.class }}</span>
          </p>
          <p><span>图文咨询</span><span>优选药房</span></p>
          <p>擅长：{{ item.strong }}</p>
          <p>
            <span style="font-size: 12px">好评率<span style="color: orange; font-weight: bold">100%</span></span>
            |
            <span style="font-size: 12px">锦旗<span style="color: orange; font-weight: bold">127</span></span>
            |
            <span style="font-size: 12px">浏览人次<span style="color: orange; font-weight: bold">62369</span></span>
          </p>
          <div class="price">
            <div>￥{{ item.praise }} <span>起</span></div>
            <button class="button1" @click="goToDetail(item.id)">问医生</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import http from '@/utils/http'
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import _ from 'lodash'
const router = useRouter()
// 列表数据
const listData = ref([])
const listDataSearch = ref([])
async function GetList() {
  const res = await http.get('/api/doctorList')
  console.log(res)
  const data = res.data.data
  listData.value = data
  listDataSearch.value = data
}
GetList()
// 搜索
const searchKeyword = ref('')

const filteredUsers = computed(() => {
  if (searchKeyword.value === '') {
    listDataSearch.value = listData.value
  } else {
    listDataSearch.value = listData.value.filter((item) => item.name.includes(searchKeyword.value))
  }
})

// const debouncedFilter = _.debounce(() => {
//     if (searchKeyword.value === '') {
//         listDataSearch.value = listData.value;
//     } else {
//         listDataSearch.value = listData.value.filter((item) => item.name.includes(searchKeyword.value));
//     }
// }, 300);

// const filteredUsers = computed(() => {
//     debouncedFilter();
//     return listDataSearch.value;
// });

//筛选
const list = ref([])
const value1 = ref(0)
const value2 = ref('a')
const option1 = [
  { text: '城市', value: 0 },
  { text: '新款商品', value: 1 },
  { text: '活动商品', value: 2 },
]
const option2 = [
  { text: '默认排序', value: 'a' },
  { text: '好评排序', value: 'b' },
  { text: '销量排序', value: 'c' },
]
// 详情

const goToDetail = (id) => {
  router.push(`/details/${id}`)
}

const onClickLeft = () => history.back()

http
  .get('/api/doctorList')
  .then((res) => {
    list.value = res.data.data
    console.log(list.value, 'list')
  })
  .catch((error) => {
    console.log(error)
  })
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;

  .top {
    width: 100%;
    height: 3.75rem;

    .search-1 {
      width: 100%;
      height: 1.875rem;
      margin-top: 0.625rem;
    }
  }

  .re {
    width: 100%;
    height: 4.6875rem;

    h3 {
      margin-left: 30px;
      width: 100%;
      height: 1.25rem;
      font-size: 0.5625rem;
      line-height: 1.25rem;
    }

    .ke {
      width: 100%;
      height: 3.4375rem;

      ul {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        align-content: space-around;
        justify-content: space-evenly;

        li {
          display: block;
          width: 2.1875rem;
          height: 1.125rem;
          border-radius: 1.25rem;
          background: #f1f3ff;
          text-align: center;
          line-height: 1.125rem;
          color: #4a72b0;
        }
      }
    }
  }

  .list {
    width: 100%;

    .list-1 {
      width: 100%;
      height: 7.5rem;
      display: flex;

      .left {
        padding: 0.3125rem;
      }

      .right {
        padding: 0.125rem;

        p {
          margin: 0.5rem;
          font-size: 0.375rem;
        }

        .price {
          display: flex;
          justify-content: space-between;
        }

        .button1 {
          width: 1.875rem;
          height: 0.8125rem;
          background: #1e69f6;
          border: 0;
          color: #fff;
          border-radius: 0.1875rem;
        }
      }
    }
  }
}
</style>